<template>
  <div class="ele-body">
    <el-card shadow="never">
      <!-- 搜索表单 -->
      <el-form
        :model="where"
        label-width="77px"
        class="ele-form-search"
        @keyup.enter.native="reload"
        @submit.native.prevent
      >
        <el-row :gutter="15">
          <el-col :lg="6" :md="12">
            <el-form-item label="媒体名称:" label-width="100px">
              <el-input
                clearable
                v-model="where.name"
                placeholder="请输入媒体名称"
              />
            </el-form-item>
          </el-col>
          <el-col :lg="6" :md="12">
            <div class="ele-form-actions">
              <el-button
                type="primary"
                icon="el-icon-search"
                class="ele-btn-icon"
                @click="reload"
              >查询
              </el-button>
              <el-button @click="reset">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        :where="where"
        :datasource="url"
        :columns="columns"
        :selection.sync="selection"
        height="calc(100vh - 315px)"
      >
        <!-- 表头工具栏 -->
        <template slot="toolbar">
          <el-button
            @click="openEdit(null)"
            type="primary"
            icon="el-icon-plus"
            class="ele-btn-icon"
            size="small"
            v-if="permission.includes('sys:admedia:add')"
          >添加
          </el-button>

        </template>

        <!-- 操作列 -->
        <template slot="action" slot-scope="{ row }">
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-edit"
            @click="openEdit(row)"
            v-if="permission.includes('sys:admedia:edit')"
          >修改
          </el-link>
        </template>

        <!-- 状态 -->
        <template slot="status" slot-scope="{ row }">
          <el-tag v-if="row.status === 1" type="primary" size="small">启用</el-tag>
          <el-tag v-if="row.status === 2" type="success" size="small">禁用</el-tag>
        </template>

      </ele-pro-table>
    </el-card>
    <!-- 编辑弹窗 -->
    <Edit :data="current" :visible.sync="showEdit" @done="reload"/>
  </div>
</template>

<script>
    import {mapGetters} from 'vuex'
    import Edit from './edit'

    export default {
        name: 'BoxAdMedia',
        components: {Edit},
        computed: {
            ...mapGetters(['permission'])
        },
        data() {
            return {
                // 表格数据接口
                url: '/BoxAdMedia/index',
                // 表格列配置
                columns: [
                    {
                        columnKey: 'selection',
                        type: 'selection',
                        width: 45,
                        align: 'center',
                        fixed: 'left'
                    },
                    {
                        prop: 'id',
                        label: 'ID',
                        width: 60,
                        align: 'center',
                        showOverflowTooltip: true,
                        fixed: 'left'
                    },
                    {
                        prop: 'name',
                        label: '媒体名称',
                        align: 'center',
                        showOverflowTooltip: true,
                        minWidth: 110
                    },
                    {
                        prop: 'e_name',
                        label: '英文名称',
                        align: 'center',
                        showOverflowTooltip: true,
                        minWidth: 110
                    },
                    {
                        prop: 'create_time',
                        label: '创建时间',
                        align: 'center',
                        showOverflowTooltip: true,
                        minWidth: 160,
                        formatter: (row, column, cellValue) => {
                            return this.$util.toDateString(cellValue)
                        }
                    },
                    {
                        prop: "status",
                        label: "状态",
                        showOverflowTooltip: true,
                        minWidth: 200,
                        align: "center",
                        slot:"status"
                    },
                    {
                        prop: 'update_time',
                        label: '更新时间',
                        align: 'center',
                        showOverflowTooltip: true,
                        minWidth: 160,
                        formatter: (row, column, cellValue) => {
                            return this.$util.toDateString(cellValue)
                        }
                    },
                    {
                        columnKey: 'action',
                        label: '操作',
                        width: 220,
                        align: 'center',
                        resizable: false,
                        slot: 'action',
                        fixed: 'right'
                    }
                ],
                // 表格搜索条件
                where: {},
                // 表格选中数据
                selection: [],
                // 当前编辑数据
                current: null,
                // 是否显示编辑弹窗
                showEdit: false,
                //  是否显示收款方弹框
                showPayee: false,
                // 是否显示导入弹窗
                showImport: false,
                userLevel: 0 // 初始化为默认值
            }
        },
        mounted() {
            this.userLevel = parseInt(localStorage.getItem('level')) || 0; // 获取并更新 userLevel 的值
        },
        methods: {
            /* 刷新表格 */
            reload() {
                this.$refs.table.reload({where: this.where})
            },
            /* 重置搜索 */
            reset() {
                this.where = {}
                this.reload()
            },
            // 显示收款方
            payee(row) {
                this.current = row
                this.showPayee = true
            },
            /* 显示编辑 */
            openEdit(row) {
                this.current = row
                this.showEdit = true
            }
        }
    }
</script>

<style scoped>
</style>
